<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <title>教材资源管理系统 - 左侧导航增大版</title>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CBCB',
            accent: '#FF7D00',
            neutral: '#F5F7FA',
            'neutral-dark': '#4E5969',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          // 可在这里自定义左侧导航栏宽度，比如设为 w-72（36rem） ，原示例大概是w-64 等，按需调整
          width: {
            'sidebar-width': '36rem', // 自定义一个宽度类名，用于设置左侧导航宽度
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }

      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }

      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .tree-line {
        @apply border-l-2 border-dashed border-gray-200 ml-3 pl-4;
      }
    }
  </style>
</head>

<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <h1 class="text-xl font-bold text-primary flex items-center">
          <i class="fa fa-book mr-2"></i>
          <span>教材资源管理系统</span>
        </h1>
      </div>

      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
        <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">教材版本</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">系统设置</a>
      </div>

      <div class="flex items-center space-x-4">
        <div class="relative">
          <input type="text" placeholder="搜索教材、章节或知识点..."
            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>

        <div class="relative">
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
          </button>
        </div>

        <div class="flex items-center space-x-2 cursor-pointer group">
          <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
          <span class="hidden md:inline font-medium">张老师</span>
          <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
        </div>
      </div>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden">
    <!-- 左侧边栏 - 教材版本与章节导航 -->
    <!-- 关键调整：把 w-64 等替换为自定义的 sidebar-width 类，或者直接写 w-72 等具体宽度值，这里用自定义的方式演示 -->
    <aside id="sidebar"
      class="w-75 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
      <div class="p-4 border-b">
        <div class="flex items-center justify-between mb-3">
          <h2 class="font-bold text-lg">教材版本导航</h2>
          <div class="relative">
            <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
              <option>全部学科</option>
              <option>数学</option>
              <option>物理</option>
              <option>化学</option>
              <option>生物</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>
        </div>

        <div class="relative">
          <input type="text" placeholder="搜索章节..."
            class="w-full pl-8 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-1 focus:ring-primary">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
      </div>

      <!-- 教材版本选择 -->
      <div class="p-4 border-b">
        <h3 class="font-medium text-sm text-gray-500 mb-2">选择教材版本</h3>
        <div class="space-y-2">
          <div class="relative">
            <select id="version-selector"
              class="w-full appearance-none bg-gray-100 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
              <option value="RJ-2023">人教版 2023版</option>
              <option value="SX-2022">苏教版 2022版</option>
              <option value="BS-2023">北师大版 2023版</option>
              <option value="HK-2024">沪科版 2024版</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>

          <div class="flex space-x-2 mt-2">
            <button class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-lg hover:bg-primary/20 transition-colors flex-1">
              <i class="fa fa-plus mr-1"></i> 添加新版本
            </button>
            <button class="text-xs bg-gray-100 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-200 transition-colors">
              <i class="fa fa-refresh mr-1"></i> 同步
            </button>
          </div>
        </div>
      </div>

      <!-- 章节树形导航 -->
      <div class="p-4">
        <div class="flex items-center justify-between mb-3">
          <h3 class="font-medium text-sm text-gray-500">章节结构</h3>
          <div class="flex space-x-1">
            <button id="expand-all" class="text-xs text-gray-500 hover:text-primary">展开</button>
            <span class="text-gray-300">|</span>
            <button id="collapse-all" class="text-xs text-gray-500 hover:text-primary">收起</button>
          </div>
        </div>

        <div class="space-y-1">
          <!-- 章节1 -->
          <div class="chapter-item">
            <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
              <div class="flex items-center">
                <i class="fa fa-book text-primary mr-2"></i>
                <span class="font-medium">第一章 集合与常用逻辑用语</span>
              </div>
              <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
            </div>

            <div class="pl-6 mt-1 space-y-1">
              <div class="section-item">
                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                  <div class="flex items-center">
                    <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                    <span>1.1 集合的含义与表示</span>
                  </div>
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">4课时</span>
                </div>

                <div class="pl-6 mt-1 space-y-1 tree-line">
                  <div class="knowledge-item bg-primary/5 border-l-2 border-primary p-2 rounded-r-lg cursor-pointer hover:bg-primary/10 transition-colors">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa fa-dot-circle-o text-primary mr-2"></i>
                        <span>集合的定义</span>
                      </div>
                      <span class="text-xs text-gray-500">3题</span>
                    </div>
                  </div>

                  <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                        <span>集合的表示方法</span>
                      </div>
                      <span class="text-xs text-gray-500">5题</span>
                    </div>
                  </div>

                  <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                        <span>元素与集合的关系</span>
                      </div>
                      <span class="text-xs text-gray-500">4题</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-item">
                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                  <div class="flex items-center">
                    <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                    <span>1.2 集合间的基本关系</span>
                  </div>
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">3课时</span>
                </div>

                <div class="pl-6 mt-1 space-y-1 tree-line hidden">
                  <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                        <span>子集与真子集</span>
                      </div>
                      <span class="text-xs text-gray-500">6题</span>
                    </div>
                  </div>

                  <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                        <span>集合相等</span>
                      </div>
                      <span class="text-xs text-gray-500">2题</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 章节2 -->
          <div class="chapter-item">
            <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
              <div class="flex items-center">
                <i class="fa fa-book text-primary mr-2"></i>
                <span>第二章 一元二次函数、方程和不等式</span>
              </div>
              <i class="fa fa-angle-right text-gray-400 transition-transform"></i>
            </div>

            <div class="pl-6 mt-1 space-y-1 hidden">
              <div class="section-item">
                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                  <div class="flex items-center">
                    <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                    <span>2.1 等式性质与不等式性质</span>
                  </div>
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">4课时</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 章节3 -->
          <div class="chapter-item">
            <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
              <div class="flex items-center">
                <i class="fa fa-book text-primary mr-2"></i>
                <span>第三章 函数的概念与性质</span>
              </div>
              <i class="fa fa-angle-right text-gray-400 transition-transform"></i>
            </div>

            <div class="pl-6 mt-1 space-y-1 hidden">
              <div class="section-item">
                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                  <div class="flex items-center">
                    <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                    <span>3.1 函数的概念</span>
                  </div>
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">5课时</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
      <div class="container mx-auto">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm text-gray-500 mb-4">
          <a href="#" class="hover:text-primary">首页</a>
          <i class="fa fa-angle-right mx-2 text-gray-300"></i>
          <a href="#" class="hover:text-primary">教材版本管理</a>
          <i class="fa fa-angle-right mx-2 text-gray-300"></i>
          <a href="#" class="hover:text-primary">人教版 2023版</a>
          <i class="fa fa-angle-right mx-2 text-gray-300"></i>
          <a href="#" class="hover:text-primary">第一章 集合与常用逻辑用语</a>
          <i class="fa fa-angle-right mx-2 text-gray-300"></i>
          <span class="text-gray-700">1.1 集合的含义与表示</span>
        </div>

        <!-- 章节标题与操作区 -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <div>
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-1">集合的定义</h1>
            <p class="text-gray-500 flex items-center">
              <i class="fa fa-book text-primary mr-2"></i>
              人教版数学必修第一册 · 第一章 集合与常用逻辑用语 · 1.1 集合的含义与表示
            </p>
          </div>

          <div class="flex space-x-3 mt-4 md:mt-0">
            <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
              <i class="fa fa-edit mr-2"></i> 编辑
            </button>
            <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
              <i class="fa fa-share-alt mr-2"></i> 分享
            </button>
            <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
              <i class="fa fa-plus mr-2"></i> 添加题目
            </button>
          </div>
        </div>

        <!-- 章节内容卡片 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
          <div class="prose max-w-none">
            <h2 class="text-xl font-bold text-gray-800 mb-4">知识点：集合的定义</h2>

            <p class="mb-4">一般地，我们把研究对象统称为元素（element），把一些元素组成的总体叫做集合（set）（简称为集）。</p>

            <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
              <h3 class="font-bold text-blue-800 mb-2">数学语言表示</h3>
              <p class="text-blue-700">如果 \( a \) 是集合 \( A \) 的元素，就说 \( a \) 属于（belong to）集合 \( A \)，记作 \( a \in A \)；如果 \( a \) 不是集合 \( A \) 中的元素，就说 \( a \) 不属于（not belong to）集合 \( A \)，记作 \( a \notin A \)。</p>
            </div>

            <h3 class="font-bold text-gray-800 mb-3 mt-6">集合中元素的特性</h3>
            <ul class="list-disc pl-5 mb-4 space-y-2">
              <li><strong>确定性</strong>：给定的集合，它的元素必须是确定的，也就是说，给定一个集合，那么任何一个元素在不在这个集合中就确定了。</li>
              <li><strong>互异性</strong>：一个给定集合中的元素是互不相同的，也就是说，集合中的元素是不重复出现的。</li>
              <li><strong>无序性</strong>：集合中的元素是没有顺序的，也就是说，集合中的元素可以任意排列。</li>
            </ul>

            <h3 class="font-bold text-gray-800 mb-3 mt-6">集合的表示方法</h3>
            <p class="mb-4">集合通常用大写拉丁字母 \( A, B, C, \ldots \) 表示，而元素用小写拉丁字母 \( a, b, c, \ldots \) 表示。</p>

            <div class="bg-gray-50 p-4 rounded-lg mb-4">
              <h4 class="font-bold text-gray-800 mb-2">常用数集及其记法</h4>
              <table class="w-full border-collapse">
                <thead>
                  <tr class="bg-gray-100">
                    <th class="border border-gray-200 px-4 py-2 text-left">数集</th>
                    <th class="border border-gray-200 px-4 py-2 text-left">记法</th>
                    <th class="border border-gray-200 px-4 py-2 text-left">含义</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="border border-gray-200 px-4 py-2">非负整数集（自然数集）</td>
                    <td class="border border-gray-200 px-4 py-2">\( \mathbb{N} \)</td>
                    <td class="border border-gray-200 px-4 py-2">全体非负整数组成的集合</td>
                  </tr>
                  <tr class="bg-gray-50">
                    <td class="border border-gray-200 px-4 py-2">正整数集</td>
                    <td class="border border-gray-200 px-4 py-2">\( \mathbb{N}^* \) 或 \( \mathbb{N}^+ \)</td>
                    <td class="border border-gray-200 px-4 py-2">全体正整数组成的集合</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-4 py-2">整数集</td>
                    <td class="border border-gray-200 px-4 py-2">\( \mathbb{Z} \)</td>
                    <td class="border border-gray-200 px-4 py-2">全体整数组成的集合</td>
                  </tr>
                  <tr class="bg-gray-50">
                    <td class="border border-gray-200 px-4 py-2">有理数集</td>
                    <td class="border border-gray-200 px-4 py-2">\( \mathbb{Q} \)</td>
                    <td class="border border-gray-200 px-4 py-2">全体有理数组成的集合</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-4 py-2">实数集</td>
                    <td class="border border-gray-200 px-4 py-2">\( \mathbb{R} \)</td>
                    <td class="border border-gray-200 px-4 py-2">全体实数组成的集合</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 相关题目区域 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">相关题目</h2>
            <div class="flex items-center space-x-3">
              <div class="relative">
                <select class="appearance-none bg-gray-100 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                  <option>全部题型</option>
                  <option>选择题</option>
                  <option>填空题</option>
                  <option>解答题</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
              </div>

              <div class="relative">
                <select class="appearance-none bg-gray-100 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                  <option>难度不限</option>
                  <option>容易</option>
                  <option>中等</option>
                  <option>困难</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
              </div>
            </div>
          </div>

          <!-- 题目列表 -->
          <div class="space-y-4">
            <!-- 题目1 -->
            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full mr-2">选择题</span>
                    <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">容易</span>
                  </div>

                  <p class="text-gray-800 mb-3">下列各组对象中不能构成集合的是（ ）</p>

                  <div class="ml-4 space-y-2 text-gray-700">
                    <p>A. 某班视力较好的同学</p>
                    <p>B. 所有的正三角形</p>
                    <p>C. 小于20的所有自然数</p>
                    <p>D. 方程 \( x^2 - 4 = 0 \) 的所有实数解</p>
                  </div>
                </div>

                <div class="ml-4 flex flex-col space-y-2">
                  <button class="text-primary hover:text-primary/80 text-sm">查看答案</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">编辑</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">删除</button>
                </div>
              </div>
            </div>

            <!-- 题目2 -->
            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full mr-2">选择题</span>
                    <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded-full">中等</span>
                  </div>

                  <p class="text-gray-800 mb-3">已知集合 \( A = \{ x \in \mathbb{Z} \mid -2 < x < 3 \} \)，则集合 \( A \) 中的元素个数为（ ）</p>

                  <div class="ml-4 space-y-2 text-gray-700">
                    <p>A. 3</p>
                    <p>B. 4</p>
                    <p>C. 5</p>
                    <p>D. 6</p>
                  </div>
                </div>

                <div class="ml-4 flex flex-col space-y-2">
                  <button class="text-primary hover:text-primary/80 text-sm">查看答案</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">编辑</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">删除</button>
                </div>
              </div>
            </div>

            <!-- 题目3 -->
            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full mr-2">填空题</span>
                    <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">容易</span>
                  </div>

                  <p class="text-gray-800 mb-3">用符号"\( \in \)"或"\( \notin \)"填空：</p>

                  <div class="ml-4 space-y-2 text-gray-700">
                    <p>（1）0 ______ \( \mathbb{N} \)</p>
                    <p>（2）\( \sqrt{2} \) ______ \( \mathbb{Q} \)</p>
                    <p>（3）-2 ______ \( \mathbb{Z} \)</p>
                    <p>（4）\( \pi \) ______ \( \mathbb{R} \)</p>
                  </div>
                </div>

                <div class="ml-4 flex flex-col space-y-2">
                  <button class="text-primary hover:text-primary/80 text-sm">查看答案</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">编辑</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">删除</button>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="flex items-center justify-between mt-6">
            <div class="text-sm text-gray-500">显示 1-3 条，共 3 条</div>
            <div class="flex space-x-1">
              <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
                <i class="fa fa-angle-left"></i>
              </button>
              <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
              <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
                <i class="fa fa-angle-right"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 相关资源推荐 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-xl font-bold text-gray-800 mb-4">相关资源推荐</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 资源卡片1 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-blue-100 flex items-center justify-center">
                <i class="fa fa-video-camera text-5xl text-blue-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合的定义与性质</h3>
                <p class="text-sm text-gray-500 mb-3">15分钟视频课程，讲解集合的基本概念和元素特性</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">视频</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- 资源卡片2 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-green-100 flex items-center justify-center">
                <i class="fa fa-file-text-o text-5xl text-green-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合知识点总结与例题解析</h3>
                <p class="text-sm text-gray-500 mb-3">详细总结集合的知识点，并配有典型例题解析</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">文档</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- 资源卡片3 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-purple-100 flex items-center justify-center">
                <i class="fa fa-puzzle-piece text-5xl text-purple-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合的定义 练习题</h3>
                <p class="text-sm text-gray-500 mb-3">50道针对性练习题，帮助巩固集合的定义相关知识</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full">练习</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <footer class="bg-white border-t border-gray-200 py-4">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="mb-4 md:mb-0">
          <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
        </div>

        <div class="flex space-x-6">
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-question-circle mr-1"></i> 帮助中心
          </a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-file-text-o mr-1"></i> 使用条款
          </a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-shield mr-1"></i> 隐私政策
          </a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 侧边栏切换功能
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('-translate-x-full');
    });

    // 章节展开/收起功能
    document.querySelectorAll('.chapter-item').forEach(item => {
      const header = item.querySelector('.flex.items-center.justify-between');
      const content = item.querySelector('.pl-6');
      const icon = header.querySelector('.fa-angle-down, .fa-angle-right');

      header.addEventListener('click', () => {
        content.classList.toggle('hidden');
        if (content.classList.contains('hidden')) {
          icon.classList.remove('fa-angle-down');
          icon.classList.add('fa-angle-right');
        } else {
          icon.classList.remove('fa-angle-right');
          icon.classList.add('fa-angle-down');
        }
      });
    });

    // 小节展开/收起功能
    document.querySelectorAll('.section-item').forEach(item => {
      const header = item.querySelector('.flex.items-center.justify-between');
      const content = item.querySelector('.tree-line');

      header.addEventListener('click', () => {
        content.classList.toggle('hidden');
      });
    });

    // 展开所有章节
    document.getElementById('expand-all').addEventListener('click', () => {
      document.querySelectorAll('.chapter-item .pl-6, .section-item .tree-line').forEach(el => {
        el.classList.remove('hidden');
      });
      document.querySelectorAll('.chapter-item .fa-angle-right, .section-item .fa-angle-right').forEach(icon => {
        icon.classList.remove('fa-angle-right');
        icon.classList.add('fa-angle-down');
      });
    });

    // 收起所有章节
    document.getElementById('collapse-all').addEventListener('click', () => {
      document.querySelectorAll('.chapter-item .pl-6, .section-item .tree-line').forEach(el => {
        el.classList.add('hidden');
      });
      document.querySelectorAll('.chapter-item .fa-angle-down, .section-item .fa-angle-down').forEach(icon => {
        icon.classList.remove('fa-angle-down');
        icon.classList.add('fa-angle-right');
      });
    });

    // 模拟题目查看答案功能
    document.querySelectorAll('.text-primary.hover\\:text-primary\\/80').forEach(button => {
      button.addEventListener('click', function() {
        alert('此功能需要登录后使用');
      });
    });

    // 模拟版本切换功能
    document.getElementById('version-selector').addEventListener('change', function() {
      alert(`已切换到${this.options[this.selectedIndex].text}`);
    });
  </script>
</body>

</html>
